<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻活动 - <?=C('S_TITLE')?> <?=C('S_STITLE')?></title>
<include file="Public:_head" />

</head>

<body>
<include file="Public:_header" />

<div id="wrap">
    <div class="hero">
        <img src="/img/tmp/37.jpg" alt="" />
    </div>
    
	<div class="gundong-box">
		<div class="gundong">
			<div class="gundong-left"></div>
			<div class="gundong-right"></div>
			<div class="gundong-items">
				<volist id="v" name="teach" key="k">
					<div class="gundong-item">
						<img src="/upload/teach/{$v.id}/img.jpg" alt="" />
					</div>
				</volist>
			</div>
		</div>
	</div>
</div>


<include file="Public:_footer" />


<script type="text/javascript">
	$(function() {
		var $right = $('.gundong-right');
		var $left = $('.gundong-left');
		var $items = $('.gundong-item');
		var moving = false;

		var timeId = null;
		var time = 0;
		$('.gundong-items').prepend($items.clone(true));

		var $current = $items.eq(0).prev();
		$current.addClass('on');

		var move = function (direction) {
			if(moving) return;
			moving = true;

			var count = 0;

			var hideCss = {
				width: 868,
				height: 489,
				top: 150,
				left: 375
			}

			var smallLeftCss = {
				width: 1135,
				height: 639,
				top: 79,
				left: 0,
			}

			var smallRightCss = {
				width: 1135,
				height: 639,
				top: 79,
				left: 483
			}

			var currentCss = {
				width: 1402,
    			height: 790,
				top: 0,
				left: 109,
			}

			if(direction == 'right') {
				var $right = $current.next().next()
				var $hide = $current.prev()
				var $left = $current
				$current = $current.next()
			} else {
				var $left = $current.prev().prev()
				var $hide = $current.next()
				var $right = $current
				$current = $current.prev()
			}

			if(!$current.next().length) {
				$('.gundong-right').css('display', 'none')
			} else {
				$('.gundong-right').css('display', 'block')
			}
			if(!$current.prev().length) {
				$('.gundong-left').css('display', 'none')
			} else {
				$('.gundong-left').css('display', 'block')
			}

			$right.animate(smallRightCss, time);
			$hide.animate(hideCss, time).css('z-index', '');
			$left.animate(smallLeftCss, time);
			$current.animate(currentCss, time);

			$('.gundong-item.on').removeClass('on');
			$current.addClass('on');

			timeId = setInterval(function() {
				if($current.width() > 1268) {
					$current.css('z-index', 99);
				}
				if($right.width() < 1268) {
					$right.css('z-index', 98);
				}
				if($left.width() < 1268) {
					$left.css('z-index', 98);
				}
				if(count>500) {
					moving = false;
					clearInterval(timeId)
				}

				count += 10;
			}, 10)

			time = 500
		}

		$right.on('click', function() {
			move('right')
		})

		$left.on('click', function() {
			move('left')
		})

		$right.trigger('click')
	})
</script>

</body>
</html>